<template>
	<div class="search-form">
		<el-form :model="props.fromData" ref="form" :inline="true" :rules="rules" label-width="100px">
			<el-form-item
				v-for="item in props.formParams"
				:label="item.label"
				:prop="item.prop"
				:key="item.prop"
				:style="{ width: item.width ? item.width : '45%' }"
			>
				<el-input :disabled="item.disabled" v-if="item.type === 'input'" v-model="fromData[item.prop]" :placeholder="item.tip?item.tip:`请输入` + item.label" />
				<el-input  :disabled="item.disabled" v-if="item.type === 'textarea'" v-model="fromData[item.prop]" type="textarea" :placeholder="`请输入` + item.label"/>
				<template v-if="item.type === 'custom'">
					<slot :name="item.prop" :value="fromData[item.prop]"></slot>
				</template>
				<el-select :disabled="item.disabled" v-if="item.type === 'select'" v-model="fromData[item.prop]" :placeholder="`请选择` + item.label" clearable :style="{width: item.width ? item.width :'240px'}">
					<el-option v-for="dict in item.data.value" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
				<el-date-picker
					v-else-if="item.type === 'datetime'"
					clearable
					v-model="fromData[item.prop]"
					style="width: 240px"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="datetime"
					:placeholder="`请选择` + item.label"
				></el-date-picker>
				<el-date-picker
					v-else-if="item.type === 'date'"
					clearable
					v-model="fromData[item.prop]"
					style="width: 240px"
					value-format="YYYY-MM-DD"
					type="date"
					:placeholder="`请选择` + item.label"
				></el-date-picker>
				<el-date-picker
					v-else-if="item.type === 'datePicker'"
					:style="{ width: item.width ? item.width : '240px' }"
					v-model="fromData[item.prop]"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
		</el-form>
	</div>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
	formParams: {
		type: Array
	},
	fromData: {
		type: Object
	},
	rules: {
		type: Object
	}
})
const form = ref(null)
defineExpose({ form: form })
</script>
<style lang="scss" scoped></style>
